import * as THREE from 'three'
//import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { TWEEN } from "three/examples/jsm/libs/tween.module";
import '@/page/gozhibo/index.css';
let scene,renderer,camera;
 let axesHelper,controls;
 let mixer;
 let light,manager,interactableMeshes=[],stats;
 let clock = new THREE.Clock();
 let miku ,container;
 let logo ;
 let heart ;
 let raycaster = new THREE.Raycaster();
  let mouse = new THREE.Vector2();
 initRenderer();
 initScene();
 //initAxesHelper();
 initCamera();
 //initControls();
 initMeshes();
 //initLight();
 initManager();//进度管理
 initMouse();
 loadLogo();
 loadHeart();
 function initMouse(){
    renderer.domElement.style.touchAction = 'none';
    renderer.domElement.addEventListener('click', event => {
      // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
      raycaster.setFromCamera(mouse, camera);
      // 获取raycaster直线和所有模型相交的数组集合
      var intersects = raycaster.intersectObjects(interactableMeshes);
      playAnimation(Math.floor(Math.random() * (5 - 0 + 1)) + 0)
    }, false);
 }
function initManager(){
    manager = new THREE.LoadingManager();
    manager.onStart = (url, loaded, total) => {};
    manager.onLoad = () => {};
    manager.onProgress = async (url, loaded, total) => {
      if (Math.floor(loaded / total * 100) === 100) {
        loadingProcessTimeout && clearTimeout(loadingProcessTimeout);
        loadingProcessTimeout = setTimeout(() => {
          setState({ loadingProcess: Math.floor(loaded / total * 100) });

        }, 800);
      } else {
        setState({
          loadingProcess: Math.floor(loaded / total * 100)
        });
      }
    };
}

 function initMeshes(){
   const loader = new GLTFLoader(manager);
   loader.load('/files/gltf/Miku.glb',function(mesh){
 
    mesh.scene.traverse(child => {
        if (child.isMesh) {
          interactableMeshes.push(child)
          if (child.name === 'mesh_0') {
            child.material.metalness = 0;
            child.material.roughness = .3;
          }
          if (child.name === 'mesh_1') {
            child.material.metalness = .6;
            child.material.roughness = .4;
            child.material.emissiveIntensity = 1.6;
          }
        }
      });
      mesh.scene.position.set(2, -11, 0);
      mesh.scene.scale.set(10, 10, 10);
      scene.add(mesh.scene);
       miku = mesh;
       playAnimation(5)
   })
   animate()
 }
 function loadLogo (){
  new GLTFLoader().load('/files/gltf/logo.glb', mesh => {
    mesh.scene.traverse(child => {
      if (child.isMesh) {
        child.material.metalness = .2;
        child.material.roughness = .4;
        child.material.color = new THREE.Color(0x00a1ff);
      }
    });
    mesh.scene.position.set(-20, 8, 5);
    mesh.scene.scale.set(.012, .012, .012);
    logo = mesh.scene;
    scene.add(mesh.scene)
  });
  const ambientLight = new THREE.AmbientLight(0xffffff);
  ambientLight.intensity = 1.2;
  scene.add(ambientLight);
  animate();
}
function loadHeart() {
  new GLTFLoader().load('/files/gltf/heart.glb', mesh => {
    mesh.scene.traverse(child => {
      if (child.name === 'mesh_0') {
        child.material.metalness = .6;
        child.material.roughness = .4;
        child.material.color = new THREE.Color(0xfe3f47)
        child.material.emissiveIntensity = 1.6;
      }
    });
    mesh.scene.position.set(-20, -4, 4);
    mesh.scene.scale.set(.05, .05, .05);
    scene.add(mesh.scene);
    heart = mesh.scene;
  });
  const ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);
  animate();
}
 function playAnimation (animationIndex) {
    let meshAnimation =  miku.animations[animationIndex];
     mixer = new THREE.AnimationMixer( miku.scene);
    let animationClip = meshAnimation;
    let clipAction =  mixer.clipAction(animationClip).play();
    animationClip = clipAction.getClip();
  }
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
    stats && stats.update();
    TWEEN && TWEEN.update();
    mixer && mixer.update(clock.getDelta());
    controls && controls.update();
    heart && ( heart.rotation.y += 0.05);
    logo && ( logo.rotation.y += 0.02);
  }
 function initLight() { 
    // const cubeGeometry = new THREE.BoxGeometry(0.001, 0.001, 0.001);
    // const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    // const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    // light = new THREE.DirectionalLight(0xb5b1c1, 1);
    // scene.add(light);
    // var ambientLight = new THREE.AmbientLight(0xffffff);
    // scene.add(ambientLight);
  }
 function initRenderer(){
   
    renderer = new THREE.WebGL1Renderer({ antialias: true, alpha: true });//初始化渲染器
    renderer.setSize(window.innerWidth,window.innerHeight);//渲染器的宽高
    document.body.appendChild(renderer.domElement);
 }
 function initScene(){
    scene = new THREE.Scene();
    // scene.background = new THREE.Color(0xa0a0a0)
 }
 function initAxesHelper(){
    axesHelper = new THREE.AxesHelper(2);
    //scene.add(axesHelper);
 }
 function initCamera(){
    camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.set(4, 0, 20);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
 }

function render(){ 
    requestAnimationFrame(render);
    let delta = clock.getDelta();
    renderer.render(scene,camera);
    //mixer.update(delta);
   
}
window.addEventListener("resize", () => {
    //更新摄像头:
    camera.aspect = window.innerWidth / window.innerHeight;
    //更新摄影机的投影矩阵
    camera.updateProjectionMatrix();
    //更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    //设置渲染器像素比
    renderer.setPixelRatio(window.devicePixelRatio);
  });
export default{

}